/**canvas 正六边形 */
export function sixCanvasSmall({ id = "", index, size = 300, length = 100 }) {
  var canvas = document.getElementById(id),
    context = canvas.getContext('2d');


  // 定义边长、颜色、canvas大小
  // var length = 100, fillColor = '#000';
  // 边数
  var vertices = 6
  canvas.width = size;
  canvas.height = size;

  var getDegree = function (vertices, index) {
    return 360 / vertices * (i + 0.5) + 90;
  }

  var getRadian = function (degree) {
    return degree * Math.PI / 180;
  };

  context.beginPath();
  for (var i = 0; i < vertices; i++) {
    // 计算偏转
    var degree = getDegree(vertices, i),
      radian = getRadian(degree);

    // 增加1/3的canvas大小位移量以免被边缘挡住
    var x = Math.cos(radian) * length + size / 3;
    var y = Math.sin(radian) * length + size / 3;
    context.lineTo(x, y);
    context.lineWidth = 1.2;
  }
  context.fillStyle = colorChangeSmall(index);
  context.strokeStyle = borderColorChange(index)

  context.fill();  //填充
  context.closePath();
  context.stroke();
}
export function sixCanvasBig({ id = "", index, size = 300, length = 100 }) {
  var canvas = document.getElementById(id),
    context = canvas.getContext('2d');


  // 定义边长、颜色、canvas大小
  // var length = 100, fillColor = '#000';
  // 边数
  var vertices = 6
  canvas.width = size;
  canvas.height = size;

  var getDegree = function (vertices, index) {
    return 360 / vertices * (i + 0.5) + 90;
  }

  var getRadian = function (degree) {
    return degree * Math.PI / 180;
  };

  context.beginPath();
  for (var i = 0; i < vertices; i++) {
    // 计算偏转
    var degree = getDegree(vertices, i),
      radian = getRadian(degree);

    // 增加1/3的canvas大小位移量以免被边缘挡住
    var x = Math.cos(radian) * length + size / 3;
    var y = Math.sin(radian) * length + size / 3;
    context.lineTo(x, y);
    context.lineWidth = 1.2;
  }
  context.fillStyle = colorChangeBig(index);
  context.strokeStyle = borderColorChange(index)

  context.fill();  //填充
  context.closePath();
  context.stroke();
}
function borderColorChange(index) {
  if (index === 0) {
    return "#62B8F3"
  } else if (index === 1) {
    return "#76DEC0"
  } else if (index === 2) {
    return "#FFA852"
  } else if (index === 3) {
    return "#76DEC0"
  } else if (index === 4) {
    return "#62B8F3"
  }
}
function colorChangeSmall(index) {
  if (index === 0) {
    // return "#62B8F3"
    return "#E3F4FF"
  } else if (index === 1) {
    // return "#76DEC0"
    return "#D2FFF2"
  } else if (index === 2) {
    // return "#FFA852"
    return "#FCF5EC"
  } else if (index === 3) {
    // return "#76DEC0"
    return "#D2FFF2"
  } else if (index === 4) {
    // return "#62B8F3"
    return "#E3F4FF"
  }
}
function colorChangeBig(index) {
  if (index === 0) {
    return "#62B8F3"
  } else if (index === 1) {
    return "#76DEC0"
  } else if (index === 2) {
    return "#FFA852"
  } else if (index === 3) {
    return "#76DEC0"
  } else if (index === 4) {
    return "#62B8F3"
  }
}